<template>
    <div class="chat-list-container">
      <div class="header">
        <span>消息列表</span>
      </div>
      
      <!-- 群聊列表 -->
      <div class="section-title">群聊</div>
      <div 
        v-for="room in groupChats" 
        :key="room.id" 
        class="chat-item" 
        :class="{ active: selectedRoomId === room.id }"
        @click="selectRoom(room)"
      >
        <div class="chat-avatar group-avatar">{{ room.name.substring(0, 1) }}</div>
        <div class="chat-info">
          <div class="chat-name">{{ room.name }}</div>
          <div class="chat-preview">{{ getLastMessage(room) }}</div>
        </div>
      </div>
      
      <!-- 私聊列表 -->
      <div class="section-title">私聊</div>
      <div 
        v-for="user in privateChats" 
        :key="user.id" 
        class="chat-item" 
        :class="{ active: selectedRoomId === user.id }"
        @click="selectRoom(user)"
      >
        <div class="chat-avatar user-avatar">{{ user.name.substring(0, 1) }}</div>
        <div class="chat-info">
          <div class="chat-name">{{ user.name }}</div>
          <div class="chat-preview">{{ getLastMessage(user) }}</div>
        </div>
      </div>
      
      <!-- 无私聊用户时显示 -->
      <div v-if="privateChats.length === 0" class="empty-list">
        暂无在线用户
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits, computed } from 'vue'
  
  const props = defineProps({
    username: {
      type: String,
      required: true
    },
    chatRooms: {
      type: Array,
      required: true
    },
    selectedRoomId: {
      type: String,
      default: ''
    },
    roomMessages: {
      type: Object,
      default: () => ({})
    }
  })
  
  const emit = defineEmits(['select-room'])
  
  // 分离群聊和私聊
  const groupChats = computed(() => {
    return props.chatRooms.filter(room => room.type === 'group')
  })
  
  const privateChats = computed(() => {
    return props.chatRooms.filter(room => room.type === 'private')
  })
  
  function selectRoom(room) {
    emit('select-room', room)
  }
  
  function getLastMessage(room) {
    let roomId = room.id
    
    // 如果是私聊，使用特殊的ID格式
    if (room.type === 'private') {
      roomId = getPrivateRoomId(props.username, room.id)
    }
    
    const messages = props.roomMessages[roomId] || []
    if (messages.length > 0) {
      const lastMsg = messages[messages.length - 1]
      return `${lastMsg.username}: ${lastMsg.content.substring(0, 15)}${lastMsg.content.length > 15 ? '...' : ''}`
    }
    return room.type === 'group' ? '群聊暂无消息' : '点击开始聊天'
  }
  
  // 生成私聊房间ID (确保两人之间的ID一致，无论谁发起私聊)
  function getPrivateRoomId(user1, user2) {
    return [user1, user2].sort().join('_')
  }
  </script>
  
  <style scoped>
  .chat-list-container {
  height: calc(100vh - 60px); /* 设置高度为视口高度减去tabbar高度 */
  width: 100%; /* 确保占满宽度 */
    border-right: 1px solid #eaeaea;
    background-color: #f5f5f5;
    overflow-y: auto;
  box-sizing: border-box; /* 确保padding和border不会增加元素总宽度 */
  padding-bottom: 0; /* 确保底部没有额外padding */
  position: relative;
  z-index: 2; /* 确保在tabbar上方但低于聊天详情页 */
  }
  
  .header {
    padding: 15px;
    background-color: #ececec;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
  }
  
  .section-title {
    padding: 10px 15px;
    font-size: 14px;
    color: #666;
    background-color: #f0f0f0;
    border-bottom: 1px solid #eaeaea;
  }
  
  .chat-item {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
  }
  
  .chat-item:hover {
    background-color: #f0f0f0;
  }
  
  .chat-item.active {
    background-color: #e6e6e6;
  }
  
  .chat-avatar {
    width: 40px;
    height: 40px;
    color: white;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    margin-right: 12px;
  }
  
  .group-avatar {
    background-color: #07C160;
  }
  
  .user-avatar {
    background-color: #1989fa;
    border-radius: 50%;
  }
  
  .chat-info {
    flex: 1;
    overflow: hidden;
  }
  
  .chat-name {
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .chat-preview {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .empty-list {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
  }
  </style> 